import classNames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import {
  changeTodoStatus,
  delTodo,
  updateTodoName,
} from '../../store/actions/todo'
export default function TodoItem({ item }) {
  const inputRef = useRef(null)
  const dispatch = useDispatch()
  // 显示编辑框，准备一个变量用于控制编辑框的显示与否
  const [currentId, setCurrentId] = useState('')
  const [currentName, setCurrentName] = useState('')
  // 把当前双击的那一项的 item.id 给 currentId
  // 显示编辑框
  const handleDBLClick = ({ id, name }) => {
    // // 显示编辑框
    // setCurrentId(id)
    // // 回填数据
    // setCurrentName(name)
    handleBlur(id, name)
  }
  const handleTodoDel = (id) => dispatch(delTodo(id))
  const handleChangeStatus = (id) => dispatch(changeTodoStatus(id))
  // 离开 input 框的时候隐藏输入框
  const handleBlur = (id, name) => {
    setCurrentId(id)
    setCurrentName(name)
  }
  // 只有等 id 变化完毕之后才应该获取焦点比较合适，获取焦点
  useEffect(() => inputRef.current.focus(), [currentId])
  const handleKeyUp = (e) => {
    // 按下 ESC，隐藏 input 框并清空 currentName
    if (e.keyCode === 27) return handleBlur('', '')
    // 敲回车的时候，把 currentName 给 Redux 中的那一项
    // !传过去 item.id 和 currentName
    if (e.keyCode === 13) {
      dispatch(updateTodoName(item.id, currentName))
      // 隐藏编辑框
      // setCurrentId('')
      // setCurrentName('')
      handleBlur('', '')
    }
  }
  return (
    <li
      className={classNames({
        completed: item.done,
        editing: item.id === currentId,
      })}
    >
      <div className='view'>
        <input
          className='toggle'
          type='checkbox'
          checked={item.done}
          onChange={() => handleChangeStatus(item.id)}
        />
        <label onDoubleClick={() => handleDBLClick(item)}>{item.name}</label>
        <button
          className='destroy'
          onClick={() => handleTodoDel(item.id)}
        ></button>
      </div>
      {/* 编辑功能 */}
      <input
        className='edit'
        value={currentName}
        onChange={(e) => {
          // 修改 Redux 中对应的 item.name，这样的效果是边输入边修改
          // !需求：敲回车的时候才修改
          // 思路：准备一个变量，输入的时候把数据存储到这个变量里面，敲回车的时候才把这个变量对应的数据给 Redux 中的那一项
          setCurrentName(e.target.value)
        }}
        ref={inputRef}
        onKeyUp={handleKeyUp}
        onBlur={() => handleBlur('', '')}
      />
    </li>
  )
}
